'use client'

import { useToast } from '@/components/ui/use-toast'
import { Button } from '@/components/ui/button'
import { ToastProvider } from '@/components/ui/use-toast'
import ProgressPage from './progress/page'
import TestToast from './test-toast'
import GoalForm from '@/components/dashboard/goal-form'

export default function TestAllToasts() {
  const toast = useToast()

  return (
    <ToastProvider>
      <div className="p-6 space-y-8">
        <h1 className="text-3xl font-bold text-center">测试所有Toast功能</h1>

        <div className="bg-gray-50 p-4 rounded-lg shadow">
          <h2 className="text-xl font-semibold mb-4">基础Toast测试</h2>
          <Button onClick={() => toast({ title: '成功', description: '基础Toast正常工作', status: 'success' })}>
            显示成功Toast
          </Button>
          <Button onClick={() => toast({ title: '错误', description: '基础Toast正常工作', status: 'error' })} className="ml-4">
            显示错误Toast
          </Button>
        </div>

        <div className="bg-gray-50 p-4 rounded-lg shadow">
          <h2 className="text-xl font-semibold mb-4">TestToast组件测试</h2>
          <TestToast />
        </div>

        <div className="bg-gray-50 p-4 rounded-lg shadow">
          <h2 className="text-xl font-semibold mb-4">ProgressPage组件测试</h2>
          <ProgressPage />
        </div>

        <div className="bg-gray-50 p-4 rounded-lg shadow">
          <h2 className="text-xl font-semibold mb-4">GoalForm组件测试</h2>
          <GoalForm
            onClose={() => toast({ title: '表单已关闭' })} 
            onSubmit={() => toast({ title: '表单已提交' })} 
          />
        </div>
      </div>
    </ToastProvider>
  )
}